<template>
	<view class="bar">
		<view class="bar_it" v-for="(item,index) in tabList" :key="index" @click="$navRed(item.pagePath)">
			<image :src="currentIndex === index ? item.selectedIcon : item.icon" class="tab-icon" />
			<view class="bar_tit" :class="{'bar_tit_ac':currentIndex==index}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bar",
		data() {
			return {
				tabList: [{
						text: '参与拼团',
						pagePath: '/pages/pintuan/index',
						icon: require('@/pages/groupbuy/static/icon/home.png'),
						selectedIcon: require('@/pages/groupbuy/static/icon/home1.png')
					},
					{
						text: '拼团规则',
						pagePath: '/pages/pintuan/rule',
						icon: require('@/pages/groupbuy/static/icon/rule.png'),
						selectedIcon: require('@/pages/groupbuy/static/icon/rule1.png')
					},
					{
						text: '我参与的',
						pagePath: '/pages/pintuan/my',
						icon: require('@/pages/groupbuy/static/icon/mygroup.png'),
						selectedIcon: require('@/pages/groupbuy/static/icon/mygroup1.png')
					},
					{
						text: '我发起的',
						pagePath: '/pages/pintuan/my?type=self',
						icon: require('@/pages/groupbuy/static/icon/mylaunch.png'),
						selectedIcon: require('@/pages/groupbuy/static/icon/mylaunch1.png')
					}
				],
				currentIndex: 0
			};
		},
		created() {
			this.initCurrentIndex()
		},
		methods: {
			initCurrentIndex() {
				const pages = getCurrentPages(),
					newPages = pages[pages.length - 1],
					currentRoute = newPages.route
				this.currentIndex = this.tabList.findIndex(item => {
					if (currentRoute == 'pages/pintuan/my' && newPages.options&& newPages.options.type == 'self') {
						return item.pagePath=='/pages/pintuan/my?type=self'
					} else {
						return item.pagePath.includes(currentRoute)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
	}

	.bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 98;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));

		.bar_it {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 6rpx;
			}

			.bar_tit {
				color: #999999;
				font-size: 24rpx;
			}

			.bar_tit_ac {
				color: #3D3D3D;
			}
		}
	}
</style>